import React, { PureComponent } from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import Masonry from "react-masonry-component";

import { Layout, Row, Col, Card } from "antd";

import { taskStoreSelectors } from "../../selectors";

import marked from "marked";

const { Content } = Layout;

const Main = styled.div`
  padding: 0px 12px;
  height: calc(100vh - 64px);
  overflow: auto;

  .main {
    position: relative;
    transition: height 480ms ease-out 0s;
    height: 885px;
  }
  .main-scroll {
    visibility: hidden;
    display: inline;
    width: 0px;
    height: 0px;
    z-index: -1;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
  }
`;

const Scroll = styled.div`
  /* Created by the element-resize-detector library. */
  .erd_scroll_detection_container > div::-webkit-scrollbar {
    display: none;
  }

  .erd_scroll_detection_container_animation_active {
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s;
    -webkit-animation-name: erd_scroll_detection_container_animation;
    animation-name: erd_scroll_detection_container_animation;
  }
  @-webkit-keyframes erd_scroll_detection_container_animation {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes erd_scroll_detection_container_animation {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
`;

const CardMain = styled.span`
  z-index: 2;
  opacity: 1;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: opacity 480ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s,
    transform 480ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transform: translateX(0px) translateY(0px);

  .level-0,
  .level-undefined {
    border-left: 4px solid #8c8c8c;
  }

  .level-1 {
    border-left: 4px solid #fafafa;
  }

  .level-2 {
    border-left: 4px solid #52c41a;
  }

  .level-3 {
    border-left: 4px solid #2f54eb;
  }

  .level-4 {
    border-left: 4px solid #722ed1;
  }

  .level-5 {
    border-left: 4px solid #fa8c16;
  }

  .level-6 {
    border-left: 4px solid #874d00;
  }

  .issue-card p {
    margin: 0;
    img {
      max-width: 320px;
    }
  }

  .issue-card .subtitle {
    font-size: 12px;
    color: #bfbfbf;
    margin-top: 8px;
  }

  .issue-card .title {
    word-break: break-all;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .issue-card .subtitle .level {
    margin-left: 12px;
  }

  .issue-card .ant-row .markdown {
    word-break: break-all;
  }

  .issue-card .blur-bottom {
    -webkit-box-shadow: 0 0 0 0 #ccc, /*左边阴影*/ 0 0 0 0 #ccc,
      /*顶部阴影*/ 0 20px 40px -20px #ccc, /*底部阴影*/ 0 0 0 0 #ccc;
    box-shadow: 0 0 0 0 #ccc, /*左边阴影*/ 0 0 0 0 #ccc,
      /*顶部阴影*/ 0 20px 40px -20px #ccc, /*底部阴影*/ 0 0 0 0 #ccc; /*右边阴影*/
  }

  .issue-card .footer {
    font-size: 12px;
    color: #bfbfbf;
    margin-top: 10px;
  }
`;

class TaskCard extends PureComponent {
  render() {
    const { data = {} } = this.props;
    const markDownBody = marked(data.body);
    return (
      <CardMain>
        <Card
          className="issue-card level-3"
          hoverable
          style={{ maxWidth: "340px", cursor: "auto" }}
          title={
            <div>
              <div className="title">
                <span>
                  <a href="#">
                    <span style={{ color: "black" }}>{data.title}</span>
                  </a>
                </span>
              </div>
              <p className="subtitle">
                <span>
                  <a href="#">{data.repository.fullName}</a>
                </span>
                <span style={{ marginLeft: "8px" }}>
                  <a href={data.htmlUrl}>#{data.number}</a>
                </span>
                <span className="level">level: {data.level}</span>
              </p>
            </div>
          }
        >
          <Row>
            <div style={{ maxHeight: "600px", overflow: "hidden" }}>
              <div className="markdown">
                <div dangerouslySetInnerHTML={{ __html: markDownBody }} />
              </div>
            </div>
          </Row>
          <Row style={{ marginTop: "20px" }} />
          <Row className="footer">
            <Col span={10}>
              <a aria-current="false">{data.project.name}</a>
            </Col>
            <Col span={14} style={{ textAlign: "right" }}>
              zzswang 发布于 6 小时前
            </Col>
          </Row>
        </Card>
      </CardMain>
    );
  }
}

@connect(state => {
  const listTasksState = taskStoreSelectors.listTasks(state) || {};
  return {
    tasks: listTasksState.result || [],
  };
})
export default class TaskContent extends PureComponent {
  render() {
    const { tasks } = this.props;
    return (
      <Layout>
        <Content>
          <div style={{ position: "relative" }}>
            <Main>
              <div className="main">
                <Scroll className="main-scroll" />
                <Masonry>
                  {tasks.map(r => {
                    return <TaskCard key={r.title} data={r} />;
                  })}
                </Masonry>
              </div>
            </Main>
          </div>
        </Content>
      </Layout>
    );
  }
}
